<!DOCTYPE html>
<html>
<head>
    <title>图片上传与地理信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            text-align: center;
            margin-top: 50px;
        }
        .btn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 50%;
            max-width: 500px;
            border-radius: 5px;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close:hover {
            color: black;
        }
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
        }
        .input-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="container">
        <button class="btn" id="openModalBtn">上传点位</button>
    </div>

    <div id="uploadModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>上传图片并输入地理信息</h2>
            <div class="input-group">
                <label for="fileInput">选择图片：</label>
                <input type="file" id="fileInput" accept="image/*">
            </div>
            <div class="input-group">
                <label for="latitudeInput">经度：</label>
                <input type="text" id="latitudeInput" placeholder="请输入经度">
            </div>
            <div class="input-group">
                <label for="longitudeInput">纬度：</label>
                <input type="text" id="longitudeInput" placeholder="请输入纬度">
            </div>
            <button class="btn" id="uploadBtn">上传</button>
        </div>
    </div>

    <script>
         // 修改后的完整脚本（使用Fetch API）
         const modal = document.getElementById("uploadModal");
        const openModalBtn = document.getElementById("openModalBtn");
        const closeBtn = document.getElementsByClassName("close")[0];
        const uploadBtn = document.getElementById("uploadBtn");
        const fileInput = document.getElementById('fileInput');
        
        // 修正坐标输入框ID
        const longitudeInput = document.getElementById('longitudeInput'); // 经度
        const latitudeInput = document.getElementById('latitudeInput');   // 纬度

        // 模态框控制逻辑保持不变...
        openModalBtn.onclick = function() {
              modal.style.display = "block";
          }

          closeBtn.onclick = function() {
              modal.style.display = "none";
          }

          window.onclick = function(event) {
              if (event.target == modal) {
                  modal.style.display = "none";
              }
          }

      uploadBtn.onclick = async function() {
    // 验证输入
    if (fileInput.files.length === 0) {
        alert('请选择图片');
        return;
    }

    const file = fileInput.files[0];
    
    // 添加文件大小校验（示例限制50MB）
    const MAX_SIZE = 50 * 1024 * 1024;
    if (file.size > MAX_SIZE) {
        alert(`文件大小不能超过${MAX_SIZE/1024/1024}MB`);
        return;
    }

    if (!longitudeInput.value || !latitudeInput.value) {
        alert('请输入经度和纬度');
        return;
    }

    uploadBtn.disabled = true;
    uploadBtn.textContent = '上传中...';

    try {
        // 使用FormData处理文件流
        const formData = new FormData();
        formData.append('species', 'test');
        formData.append('location_long', longitudeInput.value);
        formData.append('location_lat', latitudeInput.value);
        formData.append('photo', file); // 直接附加文件对象

        const response = await fetch('http://localhost:4000/knowledge_git/upload_best_photo_point', {
            method: 'POST',
            body: formData // 自动设置Content-Type为multipart/form-data
        });

        // 处理响应
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.msg || `HTTP错误 ${response.status}`);
        }

        const data = await response.json();

        if (data.code === 200) {
            alert('上传成功！');
            modal.style.display = "none";
            fileInput.value = '';
            longitudeInput.value = '';
            latitudeInput.value = '';
        }
    } catch (err) {
        console.error('上传失败:', err);
        alert(`上传失败：${err.message}`);
    } finally {
        uploadBtn.disabled = false;
        uploadBtn.textContent = '上传';
    }
};

    </script>
</body>
</html>

